import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';

const features = [
    {
        title: '努力工作',
        imageUrl: 'img/work.jpg',
        description: (
            <>
                与其寻找自己喜欢的工作，不如先喜欢上已有的工作；与其追求幻想，还不如爱上眼前的工作；工作是你改变人生的开始；坚持“愚直地、认真地、诚实地”工作。
            </>
        ),
    },
    {
        title: '好好读书',
        imageUrl: 'img/book.jpg',
        description: (
            <>
                赵恒的《劝学诗》：富家不用买良田，书中自有千钟粟；安居不用架高堂，书中自有黄金屋；出门莫恨无人随，书中有马多如簇；娶妻莫恨无良媒，书中自有颜如玉；男儿欲遂平生志，六经勤向窗前读。
            </>
        ),
    },
    {
        title: '实现理想',
        imageUrl: 'img/dream.jpg',
        description: (
            <>
                要么努力工作！有么好好读书！读书是为了好好工作，工作是为了读更多的书，因为读书会让你变得富有和满足，才能最终成就你的理想。
            </>
        ),
    },
];
const attentions = [
    {
        title: 'ReactNativeSuperUI',
        imageUrl: 'img/me/SuperIcon.png',
        github: 'https://github.com/algate/reactnativeSuperUI',
        description: (
            <>
                机缘巧合之下搞了 React-Native 开发，在开发中收集了很多RN的组件：轮播，日历，字体，BottomS，等分享出来！
            </>
        ),
    },
    {
        title: '🔨UI-微信小程序',
        imageUrl: 'img/me/applet.png',
        description: (
            <>
                H5、小程序等开发收藏的移动UI组件；多级联动、手写签名、二维码扫码；不追功逐利，只淡泊名利！
            </>
        ),
    },
    {
        title: '我叫白纸-公众号',
        imageUrl: 'img/me/wx.jpg',
        description: (
            <>
                苟活半生、有所顿悟、不求大起大落，只求岁月静好！努力工作、好好读书，静待云卷云舒、花落花开！
            </>
        ),
    },
    {
        title: '⚽彩-QQ小程序(审核中…)',
        imageUrl: 'img/me/qqapplet.png',
        description: (
            <>
                理想很丰满、现实很骨干；依心而为、无悔今生；不忘初心、方得始终！心怀理想、活成自己喜欢的样子！
            </>
        ),
    },
];

function Feature({ imageUrl, title, description, github }) {
    const imgUrl = useBaseUrl(imageUrl);
    return (
        <div className={clsx('col col--4', styles.feature)}>
            {imgUrl && (
                <div className="text--center">
                    <img className={styles.featureImage} src={imgUrl} alt={title} />
                </div>
            )}
            <h3>
                {title} &nbsp;
                {
                    github &&
                    <a href={github} target="_blank">GITHUB</a>
                }
            </h3>
            <p>{description}</p>
        </div>
    );
}

function Home() {
    const context = useDocusaurusContext();
    const { siteConfig = {} } = context;
    return (
        <Layout
            title={`${siteConfig.title}`}
            description="Description will go into a meta tag in <head />">
            <header className={clsx('hero hero--primary', styles.heroBanner)}>
                {/* <div className={styles.Snow}>
                    <canvas id="Snow"></canvas>
                </div> */}
                <section className={styles.reflect}>
                    <div className={styles.containerLoader}>
                        <div className={styles.loader}>
                            <div className={styles.ball}></div>
                        </div>
                    </div>
                </section>
                <div className="container">
                    <h1 className={styles.hero__title}>人生笔记</h1>
                    <p className={styles.hero__subtitle}>{siteConfig.tagline}</p>
                    <p className={styles.hero__subentitle}>According to the heart, no regrets in this life;Do not forget the beginner's mind, have always;</p>
                    <div className={styles.buttons}>
                        <Link
                            className={clsx(
                                'button button--outline button--secondary',
                                styles.getStarted,
                            )}
                            to={useBaseUrl('docs/')}>
                            Get Started
                        </Link>
                    </div>
                </div>
            </header>
            <section>
                {attentions && attentions.length > 0 && (
                    <section className={styles.features}>
                        <div className="container">
                            <div className="row">
                                {attentions.map((props, idx) => (
                                    <Feature key={idx} {...props} />
                                ))}
                            </div>
                        </div>
                    </section>
                )}
            </section>
            <main>
                {features && features.length > 0 && (
                    <section className={styles.features}>
                        <div className="container">
                            <div className="row">
                                {features.map((props, idx) => (
                                    <Feature key={idx} {...props} />
                                ))}
                            </div>
                        </div>
                    </section>
                )}
            </main>
        </Layout>
    );
}

export default Home;
